<template>
  <div class="app-container">
    <el-dialog title="详情" :visible.sync="dialogVisible" width="50%" append-to-body>
      <el-table
        :data="list"
        maxHeight="500"
      >
        <el-table-column type="index" label="序号" align="center"></el-table-column>
        <el-table-column prop="title" label="商品/套餐名称" align="center"/>
        <el-table-column prop="priceType" label="类型" align="center" width="100">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.ats_price_type" :value="scope.row.priceType"/>
          </template>
        </el-table-column>
        <el-table-column prop="skuDescCn" label="商品规格" align="center" width="100"/>
        <el-table-column prop="quantity" label="商品数量" align="center" width="100"/>
        <el-table-column prop="unitPrice" label="商品单价(元)" align="center" width="100"/>
        <el-table-column prop="totalPrice" label="商品总价(元)" align="center" width="100"/>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible=false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  dicts:['ats_price_type'],
  data() {
    return {
      loading: false,
      dialogVisible: false,
      list: [],
    }
  },
  methods: {
    show(item) {
      this.list = item;
      this.dialogVisible = true
    }
  }
}
</script>
